<template>
  <div class="app-container">
    <el-card style="height: 100%; overflow-y: auto">
      <el-button icon="el-icon-back" size="small" @click="goBack()">返回</el-button>
      <div class="table-div">
        <div class="title">标题：</div>
        <div>{{ form.title }}</div>
      </div>
      <div class="table-div">
        <div class="title">副标题：</div>
        <div>{{ form.subTitle }}</div>
      </div>
      <div class="table-div">
        <div class="title">封面图：</div>
        <div>
          <img
            style="width: 200px; height: 120px; border-radius: 16px"
            :src="form.pic"
            alt=""
          />
        </div>
      </div>
      <div class="table-div">
        <div class="title">标签:</div>
        <div>{{ form.label }}</div>
      </div>
      <div class="table-div">
        <div class="title">描述:</div>
        <div>{{ form.description }}</div>
      </div>
      <div class="table-div">
        <div class="title">内容:</div>
        <div v-html="form.content"></div>
      </div>
      <div class="table-div">
        <div class="title">备注:</div>
        <div>{{ form.note }}</div>
      </div>
      <!-- <div class="table-div">
        <div class="title">浏览量:</div>
        <div>{{ form.visitCount }}</div>
      </div> -->
      <div class="table-div">
        <div class="title">虚拟学习人数:</div>
        <div>{{ form.virtualStudyCount }}</div>
      </div>
      <el-form ref="form" :rules="rulesForm" :model="form" label-width="120px">
        <div class="table-div">
          <div class="title">素材列表:</div>
        </div>
        <table-list :table-data="multipleSelection"></table-list>

        <el-button
          @click="handleClose()"
          style="width: 100px; margin-top: 100px"
          >返回</el-button
        >
        <el-form-item>
          <div style="margin-left: 350px"></div>
        </el-form-item>
      </el-form>
    </el-card>
    <add-mater ref="addMater" @tableChoose="tableChange"></add-mater>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import SingleUpload from "@/components/Upload/uploadOne";
import { addArticle, editArticle } from "@/api/article";
import {
  subjectAddApi,
  subjectDetailApi,
  subjectUpdateApi,
} from "@/api/lesson";
import AddMater from "./components/addMater.vue";
import TableList from "./components/tabledetails.vue";

const form = {
  title: "",
  subTitle: "",
  pic: "",
  label: "",
  description: "",
  content: "",
  note: "",
  visitCount: "",
  virtualStudyCount: "",
};
export default {
  name: "add",
  components: { TableList, AddMater, SingleUpload, Tinymce },
  data() {
    return {
      props: {
        emitPath: false,
      },

      form: Object.assign({}, form),
      rulesForm: {
        title: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
          {
            min: 1,
            max: 64,
            message: "长度在 1 到 64 个字符",
            trigger: "blur",
          },
        ],
        pic: [{ required: true, message: "请上传封面图", trigger: "change" }],
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ],
      },
      cateList: [],
      multipleSelection: [],
      // videoUrl: "108621bb3ab671efbfc75017f0f90102"
    };
  },
  created() {
    if (this.$route.query.id) {
      this.getInfo();
    }
  },
  mounted() {},
  methods: {
    addMaterials() {
      this.$refs.addMater.openDialog();
    },
    tableChange(val) {
      let arr = this.multipleSelection.concat(val);
      this.multipleSelection = Array.from(
        new Set(arr.map((item) => item.id))
      ).map((id) => arr.find((item) => item.id === id));
    },
    handleSubmit() {
      this.form.materials = this.multipleSelection;
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {
            subjectUpdateApi(this.form).then((res) => {
              this.$message.success("修改成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          } else {
            subjectAddApi(this.form).then((res) => {
              this.$message.success("添加成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          }
        }
      });
    },
    handleClose() {
      this.$router.go(-1);
    },

    goBack() {
      this.$router.go(-1);
    },
    editVideoId(v) {
      this.form.videoId = v;
    },
    getInfo() {
      subjectDetailApi(this.$route.query.id).then((res) => {
        this.$route.meta.title = "编辑专题";
        this.form = Object.assign({}, res.data);
        this.multipleSelection = res.data.materials;
        this.$refs.tinymce.setContent(this.form.content);
      });
    },
    onSubmit(form, type) {
      //tasksStatus   1->暂存未发布；2->定时发布；3->取消定时发布；4->已发布
      this.$refs[form].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form));
          if (params.relation) {
            console.log(params.relation);
            params.relation = JSON.stringify(params.relation);
          }
          if (params.productList) {
            delete params.productList;
          }
          if (params.publishStatus != 1) {
            // 判断是否立即发布
            params.tasksStatus = type;
            // delete params.publishStatus;
          } else {
            delete params.tasksStatus;
          }
          params.hotTopicId = params.hotTopicId.join(",");
          if (this.$route.query.id) {
            editArticle(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "编辑成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          } else {
            addArticle(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "发布成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.table-div {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  .title {
    margin-right: 20px;
    font-size: 14px;
    font-weight: bold;
  }
}
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.image-message {
  height: 96px;
  //display: flex;

  > div {
    &:nth-child(2) {
      //margin-right: 20px;
      //width: 500px;
    }
  }
}
.product-img {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  .product-img-box {
    position: relative;
    .i2 {
      position: absolute;
      right: -1px;
      top: -5px;
    }
  }
  .uploadPic {
    width: 96px;
    height: 96px;
    // margin-left: 10px;
    background: #eeeeee;
    border-radius: 8px;
    position: relative;

    .i1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  img {
    width: 96px;
    height: 96px;
    margin-right: 13px;
  }
}
.imageBg {
  width: 220px;
  height: 140px;
  line-height: 140px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.uploadPic1 {
  min-width: 96px;
  height: 96px;
  // margin-left: 10px;
  background: #fff;
  border-radius: 8px;
  position: relative;
  border: 1px solid #eee;

  .i1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.uploadPic2 {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/deep/ .el-input,
/deep/ .el-textarea {
}
</style>
